<script setup>
import { ref } from "vue";
import Dialog from "@/components/Dialog.vue";
import { OneForm_countyList,level } from "@/api/index.js";
const props = defineProps(["visible", "title"]);

const emits = defineEmits(["close", "details"]);

const open = () => {

  level({ year: "2024" }).then((res) => {

    if (res.code == 200) {
      countyData.value = res.data;
    }
  });
};
const countyData = ref([]);
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    size="default"
    @close="
      () => {
        emits('close');
      }
    "
    @open="open"
  >
    <div class="county">
      <div
        class="county-c"
        v-for="(item, index) in countyData"
        :key="index"
        @click="emits('details', item?.zoningName,item?.zoningCode?.substring(0, 6))"
      >
        {{ item.zoningName }}
      </div>
    </div>
  </Dialog>
</template>
<style lang="less" scoped>
.county {
  width: 100%;
  height: 100%;
  padding: 40px 40px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 10px;
  align-content: flex-start;
  .county-c {
    width: 196px;
    height: 47px;
    padding-left: 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #c9e9f8;
    background: url("./../../imgs/valueBg.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
